<div style="padding-top: 5px;">
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="采购到货单" name="采购到货单" [(ngModel)]="fifter.PurchaseArrivalOrderNum">
    <d-range-datepicker-pro name="制单日期" [placeholder]="['制单日期：起始','制单日期：截止']" [(ngModel)]="date" (ngModelChange)="dateChange($event)"></d-range-datepicker-pro>
    <input dTextInput style="width: 180px;" [error]="false" placeholder="物料编码/物料名称" [(ngModel)]="fifter.Part">
    <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter2()"><i
        class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div class="mt-5">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
      [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
      (checkAllChange)="getCheckedRows();getCheckedRowsData() " (rowCheckChange)="getCheckedRows();getCheckedRowsData()"
      [resizeable]="true" [maxHeight]="'400px'">
      <thead dTableHead [checkable]="true">
        <tr dTableRow>
          <th dHeadCell [fixedLeft]="colOption.fixedLeft" [fixedRight]="colOption.fixedRight" *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr dTableRow>
            <td dTableCell [fixedLeft]="'0px'">
              <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked" [showGlowStyle]="false"
                (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)" [disabled]="this.data.purchaseOrderPartIds.includes(rowItem.purchaseArrivalOrderPartId)"></d-checkbox>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedLeft]="'80px'">
              <span dTooltip [content]="rowItem?.purchaseArrivalOrderNum">{{rowItem?.purchaseArrivalOrderNum}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem?.orderDate | date:'yyyy-MM-dd'">{{rowItem?.orderDate | date:'yyyy-MM-dd'}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partNum">{{rowItem.partNum}}</span>
            </td>
            <td dTableCell>
              <span>
                <div dImagePreview>
                  <d-badge *ngIf="rowItem.image" [count]="getImagesArray(rowItem.image).length" status="success">
                    <ng-container *ngFor="let imageUrl of getImagesArray(rowItem.image); let i = index">
                      <img *ngIf="getImagesArray(rowItem.image).length > 0" [src]="imageUrl" alt="图片" height="22px" [ngStyle]="{'display': i === 0 ? 'block' : 'none'}" />
                    </ng-container>
                  </d-badge>
                </div>
              </span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partName">{{rowItem.partName}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partType">{{rowItem.partType}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.partUOM">{{rowItem.partUOM}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.arrivalQuantity">{{rowItem.arrivalQuantity}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.returnedQuantity">{{rowItem.returnedQuantity}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="(rowItem.arrivalQuantity - rowItem.returnedQuantity).toString()">{{rowItem.arrivalQuantity - rowItem.returnedQuantity}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.arrivalDate | date:'yyyy-MM-dd'">{{rowItem.arrivalDate | date:'yyyy-MM-dd'}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.purchaseManNum + ' / ' + rowItem.purchaseManName">{{rowItem?.purchaseManName}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.departmentNum + ' / ' + rowItem.departmentName">{{rowItem.departmentName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.supplyChineseName">{{rowItem.supplyChineseName}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.note">{{rowItem.note}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.creator">{{rowItem.creator}}</span>
            </td>
            <td dTableCell [rowItem]="rowItem" [field]="'showType'">
              <span dTooltip [content]="rowItem.createDate | date:'yyyy-MM-dd HH:mm:ss'">{{rowItem.createDate | date:'yyyy-MM-dd HH:mm:ss'}}</span>
            </td>
            <td dTableCell [fixedRight]="'0px'">
              <span dTooltip [content]="rowItem.supplyShortName">{{rowItem.supplyShortName}}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <div>
      <p>已选 <span class="underline">{{CheckedRows.length}}</span> 条
        <a (click)="cleared()" class="cleared">清空</a>
      </p>
    </div>
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="fifter.PageSize"
      [(pageIndex)]="fifter.PageNumber" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
